<template>
	<view class="font-size-14 padding-left-11 padding-right-11 padding-top-15 line-height-1">
		<view style="padding-left: 4px;">{{props.title}}</view>
		<view class="margin-top-20 grid">
			<view class="date-view" v-for="(item, index) in props.range" :key="index" @click="setDateText(item)">
				<view class="date-view-bg" :class="cValue==item.text?(themeStore.theme=='theme-blue'?'date-sel-bg-blue':'date-sel-bg-orange'):''">{{item.text}}</view>
			</view>
		</view>
		<view class="grid date-defined" v-if="cValue=='自定义'&&props.type=='date'">
			<view class="date-defined-bg date-view-bg">
				<eui-datetime-picker type="day" v-model="StartDt" :border="false" :bgColor="bgThemeColor" @change="changeStartDt"></eui-datetime-picker>
				<!-- <UniDatetimePicker type="date" v-model="StartDt" :border="false" :bgColor="bgThemeColor" @change="changeStartDt">
				</UniDatetimePicker> -->
			</view>
			<view class="date-defined-bg"
				style="display: flex;align-items: center;height: 26px;justify-content: center;">
				<view class="date-defined-1"></view>
			</view>
			<view class="date-defined-bg date-view-bg">
				<eui-datetime-picker type="day" v-model="EndDt" :border="false" :bgColor="bgThemeColor" @change="changeEndDt"></eui-datetime-picker>
				<!-- <UniDatetimePicker type="date" v-model="EndDt" :border="false" :bgColor="bgThemeColor" @change="changeEndDt">
				</UniDatetimePicker> -->
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import UniDatetimePicker from "./uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue"
	import { ref, onMounted, watchEffect } from 'vue';
	import { useThemeStore } from '@/store/themeStore';
	const themeStore = useThemeStore(); // 主题
	const bgThemeColor = ref(themeStore.theme == 'theme-blue' ? 'linear-gradient(135deg, #02B7E6 0%, #36A9F3 100%)' : 'linear-gradient(135deg, #FF8359 0%, #FF6430 100%)')
	
	interface Props {
		value : {
			type : [Number, String, Boolean, Object],
			default : ''
		},
		modelValue : {
			type : [Number, String, Boolean, Object],
			default : ''
		},
		range : {
			type : Array,
			default : []
		},
		title : {
			type : string
		},
		type : {
			type : string,
			default : 'date'
		},
	}
	const props = defineProps<Props>();
	const emit = defineEmits(["buttonClick"]);
	watchEffect(() => {
		console.log("props.modelValue: " + JSON.stringify(props.modelValue));
		cValue.value = props.modelValue;
	});

	const cValue = ref('');
	const StartDt = ref('');
	const EndDt = ref('');

	const setDateText = item => {
		cValue.value = item.text;
		emit('buttonClick', { modelType: item.text, modelValue: '' });
	}
	const changeStartDt = e => {
		StartDt.value = e;
		emit('buttonClick', { modelType: 'StartDt', modelValue: e });
	}
	const changeEndDt = e => {
		EndDt.value = e;
		emit('buttonClick', { modelType: 'EndDt', modelValue: e });
	}
	onMounted(() => {
		cValue.value = props.modelValue;
	})
</script>

<style lang="scss" scoped>
	@import '@/main.scss';

	.font-size-14 {
		font-size: 14px;
	}

	.padding-left-11 {
		padding-left: 11rpx;
	}

	.padding-right-11 {
		padding-right: 11px;
	}

	.padding-top-15 {
		padding-top: 15px;
	}

	.padding-bottom-7 {
		padding-bottom: 7px;
	}

	.line-height-1 {
		line-height: 1;
	}

	.margin-top-20 {
		margin-top: 20rpx;
	}

	.grid {
		display: grid;
		grid-template-columns: 33.33% 33.33% 33.33%;
	}

	.date-view {
		padding: 0px 4px;
	}

	.date-view-bg {
		background-color: rgba(249, 249, 248, 1);
		border: solid 1px rgba(249, 249, 248, 1);
		border-radius: 20px;
		height: 52rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.date-sel-bg-blue {
		background-color: rgba(2, 183, 230, 0.10);
		border: solid 1px rgba(2, 183, 230, 1);
		color: rgba(2, 183, 230, 1);
	}

	.date-sel-bg-orange {
		background-color: rgba(255, 100, 48, 0.10);
		border: solid 1px #FF6430;
		color: #FF6430;
	}

	.date-defined {
		display: grid;
		grid-template-columns: auto 20px auto;
	}

	.date-defined-1 {
		width: 24rpx;
		height: 3rpx;
		background-color: rgba(216, 216, 216, 1);
	}
	::v-deep .uni-date-x{
		background-color: rgb(249, 249, 248);
	}
</style>